<template>
  <view>
	  <view style="width: 460rpx;height: 72rpx;border: 1px solid #333333;border-radius: 80rpx;padding:0 20rpx ;display: flex; ">
	  	<view style="display: flex;align-items: center;justify-content: space-between;">
	  		<view class="u-flex">
	  			<u-icon name="search" color="#333" size="30" ></u-icon>
	  			<view >
					<swiper  @click="sure" v-if="!isInput" class="swiper"  autoplay vertical circular @change="changeCurrent" interval='2000'>
						<swiper-item v-for="(item,index) in noticeList" :key="index" :current="current">{{item}}</swiper-item>
					</swiper>
					<view v-else style="height: 30rpx;width: 300rpx;margin-bottom: 10rpx;margin-left: 10rpx;color: #BEBEBE;">
						<input placeholder="请搜索" v-model="keyword" />
					</view>
	  			</view>
	  		</view>
	  		<view class="searcTxt" @click="search">
	  			搜索
	  		</view>
	  		<view>
	  		</view>
	  	</view>
	  </view>
  </view>
</template>

<script>
	export default{
		props:{
			noticeList:{
				type:Array,
			},
			isInput:{
				type:Boolean,
				default:true
			},
			keyword:{
				type:String
			}
		},
		data(){
			return{
				
				current:0
			}
		},
		methods:{
			changeCurrent(e){
				this.current=e.detail.current;
				
	
			},
			sure(){
		
				uni.navigateTo({
					url:"/pages/HM-search/HM-search?keyword="+this.noticeList[this.current]
				})
			},
			search(){
				if(this.isInput){
					this.$emit("Search",this.keyword)
				}else{
					uni.navigateTo({
						url:"/pages/HM-search/HM-search?keyword="+this.noticeList[this.current]
					})
				}
				
			}
		}
	}
</script>

<style lang="scss">
	.searcTxt{
		color: #4066F4;
	    position: relative;
		width: 100rpx;
		text-align: center;
	
	}
	
	.searcTxt::after{
		content: ' ';
		width:3rpx;
		height: 40rpx;
		background:#4066F4 ;
		position: absolute;
		left: 0;
	
	}
	.swiper{
		height: 30rpx;
		width: 300rpx;
		line-height: 30rpx;
		margin-left: 10rpx;
		color: #BEBEBE;
	}
</style>
